<template>
    <div
      class="cc-window"
      :class="{
        showFront: cloneWindowwManage.currentWindow == dialogId,
        'window-max-class': nowIsMax,
        'window-min-class': nowIsMin,
      }"
      ref="windowRef"
      v-if="show"
      :id="dialogId"
      @mousedown="selectThis"
    >
      <div
        class="header-box"
        @mousedown.prevent="moveStart($event)"
        v-if="showHeader"
      >
        <div class="header-icon"></div>
        <slot name="title">
          <div class="title">弹窗</div>
        </slot>
        <div class="header-btns">
          <i
            v-if="canMin"
            class="el-icon-minus"
            @mousedown.stop
            @click="minHandler"
          ></i>
          <i
            v-if="canMax"
            class="el-icon-full-screen"
            @mousedown.stop
            @click="maxHandler"
          ></i>
          <i
            v-if="canClose"
            class="el-icon-close"
            @mousedown.stop
            @click="closeHandler"
          ></i>
        </div>
      </div>
      <slot name="content">
        <div class="content">内容</div>
      </slot>
      <div
        class="scale-line top"
        @mousedown.prevent="scaleStart($event, 'top')"
      ></div>
      <div
        class="scale-line bottom"
        @mousedown.prevent="scaleStart($event, 'bottom')"
      ></div>
      <div
        class="scale-line left"
        @mousedown.prevent="scaleStart($event, 'left')"
      ></div>
      <div
        class="scale-line right"
        @mousedown.prevent="scaleStart($event, 'right')"
      ></div>
      <div class="corner t-l"></div>
      <div class="corner t-r"></div>
      <div class="corner b-l"></div>
      <div class="corner b-r"></div>
    </div>
  </template>
  
  <script>
  import windowManage from "../utils/windowManage";
  export default {
    props: {
      // 初始化样式
      initStyle: {
        type: Object,
        default: () => {
          return {
            width: "400px",
            height: "700px",
            left: "10px",
            top: "60px",
          };
        },
      },
      // 弹窗宽度的范围 [300,600]
      widthSize: {
        type: Array,
        default: () => [],
      },
      // 弹窗高度的范围 [300,600]
      heightSize: {
        type: Array,
        default: () => [],
      },
      // 是否显示头部
      showHeader: {
        type: Boolean,
        default: true,
      },
      // 是否可以缩放
      canScale: {
        type: Boolean,
        default: true,
      },
      // 是否可以拖动
      canDrag: {
        type: Boolean,
        default: true,
      },
      // 是否可以最小化
      canMin: {
        type: Boolean,
        default: true,
      },
      // 是否可以最大化（全屏）
      canMax: {
        type: Boolean,
        default: true,
      },
      // 是否可以关闭
      canClose: {
        type: Boolean,
        default: true,
      },
    },
    data() {
      return {
        show: false,
        startX: 0,
        startY: 0,
        startWidth: 0,
        startHeight: 0,
        scaleDirection: "",
        dialogId: "",
        cloneWindowwManage: {
          currentWindow: "", // window对象上存储的当前置顶的弹出框ID
        },
        nowIsMax: false,
        nowIsMin: false,
      };
    },
    created() {
      windowManage.idStart++;
      this.cloneWindowwManage = windowManage;
      this.dialogId = `dialog_${windowManage.idStart}`;
    },
    // mounted() {},
    // beforeDestroy() {},
    methods: {
      /**根据传递进来的参数 初始化弹窗的所有样式 */
      initWindowStyle() {
        if (!this.showHeader) {
          this.$el.style.setProperty("--header-height", "0px");
        }
        this.$el.style.setProperty("--window-width", this.initStyle.width);
        this.$el.style.setProperty("--window-height", this.initStyle.height);
        this.initStyle.top &&
          this.$el.style.setProperty("--window-top", this.initStyle.top);
        this.initStyle.left &&
          this.$el.style.setProperty("--window-left", this.initStyle.left);
        if (this.initStyle.right) {
          this.$el.style.setProperty("--window-right", this.initStyle.right);
          this.$el.style.setProperty("--window-left", "unset");
        }
        if (this.initStyle.bottom) {
          this.$el.style.setProperty("--window-bottom", this.initStyle.bottom);
          this.$el.style.setProperty("--window-top", "unset");
        }
      },
      /**选中当前弹出框*/
      selectThis() {
        this.cloneWindowwManage.currentWindow = this.dialogId;
      },
      /**缩放开始 */
      scaleStart(e, direction) {
        if (!this.canScale) return;
        this.scaleDirection = direction;
        this.startX = e.clientX;
        this.startY = e.clientY;
        this.startWidth = this.$el.offsetWidth;
        this.startHeight = this.$el.offsetHeight;
        this.$root.$el.addEventListener("mousemove", this.scaleHandler);
        this.$root.$el.addEventListener("mouseup", this.scaleEnd);
        this.$root.$el.style.cursor = ["right", "left"].includes(direction)
          ? "ew-resize"
          : "ns-resize";
      },
      scaleHandler(e) {
        let map = { right: 1, left: -1, top: -1, bottom: 1 };
        if (["right", "left"].includes(this.scaleDirection)) {
          let distance = (e.clientX - this.startX) * map[this.scaleDirection];
          if (this.startWidth + distance <= 50) return;
          if (this.widthSize.length == 2) {
            if (
              this.startWidth + distance <= this.widthSize[0] ||
              this.startWidth + distance >= this.widthSize[1]
            )
              return;
          }
          this.$el.style.setProperty(
            "--window-width",
            `${this.startWidth + distance}px`
          );
          if (this.scaleDirection === "left") {
            this.$el.style.setProperty(
              "--window-left",
              `${this.startX - distance}px`
            );
          }
        }
  
        if (["top", "bottom"].includes(this.scaleDirection)) {
          let distance = (e.clientY - this.startY) * map[this.scaleDirection];
          if (this.startHeight + distance <= 80) return;
          if (this.heightSize.length == 2) {
            if (
              this.startHeight + distance <= this.heightSize[0] ||
              this.startHeight + distance >= this.heightSize[1]
            )
              return;
          }
          this.$el.style.setProperty(
            "--window-height",
            `${this.startHeight + distance}px`
          );
          if (this.scaleDirection === "top") {
            this.$el.style.setProperty(
              "--window-top",
              `${this.startY - distance}px`
            );
          }
        }
        this.$emit("resize");
      },
      scaleEnd() {
        this.$root.$el.removeEventListener("mousemove", this.scaleHandler);
        this.$root.$el.removeEventListener("mouseup", this.scaleEnd);
        this.$root.$el.style.cursor = "default";
      },
      moveStart(e) {
        if (!this.canDrag) return;
        if (this.nowIsMax) return;
        console.log(1);
  
        this.startX = e.clientX;
        this.startY = e.clientY;
        this.offsetX = this.$el.offsetLeft;
        this.offsetY = this.$el.offsetTop;
        this.$root.$el.addEventListener("mousemove", this.moveHandler);
        this.$root.$el.addEventListener("mouseup", this.moveEnd);
      },
      moveHandler(e) {
        let distanceX = e.clientX - this.startX;
        let distanceY = e.clientY - this.startY;
        this.$el.style.setProperty(
          "--window-left",
          `${this.offsetX + distanceX}px`
        );
        this.$el.style.setProperty(
          "--window-top",
          `${this.offsetY + distanceY}px`
        );
        this.$emit("move");
      },
      moveEnd() {
        this.$root.$el.removeEventListener("mousemove", this.moveHandler);
        this.$root.$el.removeEventListener("mouseup", this.moveEnd);
      },
      minHandler(e) {
        this.selectThis();
        if (this.nowIsMax) return;
        this.nowIsMin = !this.nowIsMin;
        if (!this.nowIsMin) {
          this.$el.style.transition = "height 0.2s ease-in-out";
          setTimeout(() => {
            this.$el.style.transition = "";
          }, 200);
        }
      },
      maxHandler(e) {
        this.selectThis();
        this.nowIsMax = !this.nowIsMax;
        if (!this.nowIsMax) {
          this.$el.style.transition =
            "height 0.2s ease-in-out, width 0.2s ease-in-out, top 0.2s ease-in-out, left 0.2s ease-in-out";
          setTimeout(() => {
            this.$el.style.transition = "";
          }, 200);
        }
        setTimeout(() => {
          this.$emit("resize");
        }, 200);
      },
      closeHandler() {
        this.show = false;
        this.$emit("close");
      },
      getStatus() {
        return this.show;
      },
      open() {
        if (this.getStatus()) return this.selectThis();
        this.show = true;
        this.$nextTick(() => {
          this.initWindowStyle();
        });
        this.$emit("open");
      },
      close() {
        this.closeHandler();
      },
    },
  };
  </script>
  
  <style lang="scss" scoped>
  .cc-window {
    --header-height: 36px;
    --window-width: 300px;
    --window-height: 400px;
    --window-top: 100px;
    --window-left: 100px;
    --window-bottom: unset;
    --window-right: unset;
    z-index: 1;
    position: fixed;
    width: var(--window-width);
    height: var(--window-height);
    top: var(--window-top);
    left: var(--window-left);
    bottom: var(--window-bottom);
    right: var(--window-right);
    border: 1px solid #0099ff90;
    color: #efefef;
    background-color: rgba(1, 20, 47, 0.75);
    &.showFront {
      z-index: 2;
    }
    .header-box {
      display: flex;
      align-items: center;
      height: var(--header-height);
      border-bottom: 1px solid #0099ff90;
      padding: 0 6px;
      cursor: move;
      .header-icon {
        height: 24px;
        width: 24px;
        background-image: url("../assets/images/dialog/icon.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: center;
      }
      .title {
        padding: 0 5px;
        flex: 1;
        font-weight: 700;
        text-shadow: 0 0 5px aqua;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .header-btns {
        [class^="el-icon-"] {
          width: 22px;
          height: 22px;
          text-align: center;
          line-height: 22px;
          cursor: pointer;
          &:hover {
            background-color: #efefef30;
          }
          &:active {
            background-color: #efefef10;
          }
        }
      }
    }
    .content {
      height: calc(100% - var(--header-height));
      overflow-y: auto;
      overflow-x: hidden;
    }
    .scale-line {
      position: absolute;
      width: 4px;
      height: 4px;
      background-color: transparent;
      &.top,
      &.bottom {
        width: 100%;
        left: 0;
        top: -2px;
        cursor: ns-resize;
      }
      &.bottom {
        top: unset;
        bottom: -2px;
      }
      &.left,
      &.right {
        height: 100%;
        top: 0;
        left: -2px;
        cursor: ew-resize;
      }
      &.right {
        left: unset;
        right: -2px;
      }
    }
    .corner {
      position: absolute;
      width: 8px;
      height: 8px;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-position: center;
      &.t-l {
        top: -4px;
        left: -4px;
        background-image: url("../assets/images/dialog/c-tl.png");
        
        // background-image: url("~@/assets/images/dialog/c-tl.png");
      }
      &.t-r {
        top: -4px;
        right: -4px;
        background-image: url("../assets/images/dialog/c-tr.png");
      }
      &.b-l {
        bottom: -4px;
        left: -4px;
        background-image: url("../assets/images/dialog/c-bl.png");
      }
      &.b-r {
        bottom: -4px;
        right: -4px;
        background-image: url("../assets/images/dialog/c-br.png");
      }
    }
    &.window-min-class {
      height: var(--header-height) !important;
      transition: height 0.2s ease-in-out;
    }
    &.window-max-class {
      height: calc(100% - 10px) !important;
      width: calc(100% - 10px) !important;
      top: 5px !important;
      left: 5px !important;
      z-index: 999;
      transition: height 0.2s ease-in-out, width 0.2s ease-in-out,
        top 0.2s ease-in-out, left 0.2s ease-in-out;
    }
  }
  </style>
  